<template>
	<view class="pages">
		<view class="tops">
			<!-- <view style="width: 100%;height: 30rpx;"></view> -->
			<!-- <view class="topICons">
				<image src="/pagesA/static/hoom/yueicon.svg" mode="aspectFit" class="souruIcons"></image>
				<view class="titles">
					当前余额：
				</view>
			</view>
			<view class="footrTitle">
				<view class="icons">
					¥
				</view>
				<view class="manc">
					{{balance||0}}
				</view>
			</view> -->
			<view class="list" style="padding-top: 32rpx;">
				<image src="/pagesA/static/hoom/yueicon.svg" mode="aspectFit" class="souruIcons"></image>
				<text class="title">可提现金额</text>
				<text class="price">¥ {{balanceObj.amount}}</text>
			</view>
			<view class="list" style="padding-bottom: 32rpx;padding-top: 12rpx;">
				<image src="/pagesA/static/hoom/yueicon.svg" mode="aspectFit" class="souruIcons"></image>
				<text class="title">押金金额</text>
				<text class="price">¥ {{balanceObj.depositAmount}}</text>
			</view>
		</view>
		<view class="tabBar">
			<view :class="['itemsTOp',data.tabId == item.id?'selectClass':'']" v-for="(item,index) in data.tableList"
				:key="index" @click="handleTab(item.id)">
				{{item.text}}
				<view class="lins" v-if="item.id == data.tabId"></view>
			</view>
		</view>
		<view class="contens">
			<view class="items" v-for="(item,index) in listData" :key="index">
				<view class="lefts">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/income.svg" mode="aspectFit" class="itms" v-if="item.incomeFlag==1">
					</image>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/outcome.svg" mode="aspectFit" class="itms" v-else></image>
				</view>
				<view class="rigths">
					<view class="letf_1">
						<view style="width: 100%;height: 30rpx;"></view>
						<view class="tiutle">
							{{item.incomeTypeName}}
						</view>
						<view class="timise">
							{{item.changeTime}}
						</view>
					</view>
					<view class="left_2">
						<view style="width: 100%;height: 30rpx;"></view>
						<view :class="['tiutle',item.incomeFlag==1?'':'desss']">
							{{item.incomeFlag == 1?'+':'-'}}{{item.amount}}
						</view>
						<view class="timise">
							余额:{{item.amountAfter}}
						</view>
					</view>
				</view>
			</view>
			<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="listData.length == 0">
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		accountLog
	} from './js/api.js'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	const data = reactive({
		tableList: [{
			id:-1,
				text: '全部'
			},
			{
				id:1,
				text: '收入'
			},
			{
				id:0,
				text: '支出'
			},
		],
		tabId: -1,
	
	})
	const handleTab =(id)=>{
		data.tabId = id
		paramsData.incomeFlag = id
		if(id == -1)paramsData.incomeFlag = ''
		paramsData.pageNum = 1
		getAccountLog()
	}
	const paramsData = reactive({
		incomeFlag:'',
		pageNum:1,
		pageSize:10
	})
	const balanceObj =reactive({
		amount:0,
		depositAmount:0,
		
	})
	const listData = ref([])
	const getAccountLog =async ()=>{
		let res = await accountLog(paramsData)
		console.log(res)
		if(res.data.code == 0){
			let list = res.data.data.list
			// balance.value = res.data.data.extra
			balanceObj.amount =  res.data.data?.extra.amount||0
			balanceObj.depositAmount =  res.data.data.extra?.depositAmount||0
			if (paramsData.pageNum == 1) {
				listData.value = list
			} else {
				listData.value = listData.value.concat(list)
			}
			if (list.length < 10) isReach.value = false
		}
		
		
	}
	const isReach = ref(true)
	onReachBottom(()=>{
		if (!isReach.value) return
		paramsData.pageNum++
		getAccountLog()
	})
	onMounted(()=>{
		getAccountLog()
	})
</script>

<style lang="less" scoped>
	.pages {
		background: #F6F6F6;
		width: 100%;
		min-height: 100vh;

		.tops {
			// width: 100%;
			// height: 154rpx;
			// background-color: #fff;
			padding-top: 16rpx;
			.topICons {
				width: 690rpx;
				height: 30rpx;
				// border: 1px solid red;
				margin: auto;
				display: flex;
				align-items: center;

				.souruIcons {
					width: 30rpx;
					height: 30rpx;
				}

				.titles {
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #999999;
					line-height: 30rpx;
					font-weight: 400;
					margin-left: 16rpx;
				}
			}
			.list{
				display: flex;
				align-items: center;
				background-color: #fff;
				// height: 88rpx;
				.souruIcons {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
				}
				.title{
					color: #999999;
					width: 240rpx;
					font-size: 32rpx;
					
				}
				.price{
					font-size: 36rpx;
					color: #EE7930;
				}
			}
			.footrTitle {
				width: 690rpx;
				height: 40rpx;
				// border: 1px solid ;
				margin: auto;
				margin-top: 24rpx;
				margin-left: 76rpx;
				display: flex;
				align-items: center;

				.icons {
					font-family: ArialMT;
					font-size: 36rpx;
					color: #EE7930;
					line-height: 40rpx;
					font-weight: 400;
					margin-right: 7rpx;
				}

				.manc {
					font-family: PingFangSC-Semibold;
					font-size: 40rpx;
					color: #EE7930;
					line-height: 40rpx;
					font-weight: 600;
				}
			}
		}

		.tabBar {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;

			.itemsTOp {
				width: 33%;
				height: 100%;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #4E4E4E;
				text-align: center;
				line-height: 28rpx;
				font-weight: 400;
				// border: 1px solid;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.lins {
					background: #EE7930;
					border-radius: 5rpx;
					width: 36rpx;
					height: 4rpx;
					position: absolute;
					bottom: 0;
				}
			}

			.selectClass {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
				line-height: 28rpx;
				font-weight: 600;
			}
		}

		.contens {
			width: 100%;
			height: calc(100vh - 260rpx);
			background-color: #fff;
			border-top: 1rpx solid #EEEEEE;

			.items {
				width: 100%;
				height: 136rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lefts {
					width: 110rpx;
					height: 100%;
					// border: 1px solid red;
					display: flex;
					align-items: center;
					justify-content: center;

					.itms {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.rigths {
					width: 640rpx;
					height: 100%;
					border-bottom: 1rpx solid #eee;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.letf_1 {
						height: 100%;
						min-width: 10%;

						.tiutle {
							font-family: PingFangSC-Regular;
							font-size: 28rpx;
							color: #333333;
							line-height: 30rpx;
							font-weight: 400;
						}


						.timise {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #999999;
							line-height: 30rpx;
							font-weight: 400;
							margin-top: 16rpx;
						}
					}

					.left_2 {
						height: 100%;
						min-width: 10%;
						// border: 1px solid;
						margin-right: 30rpx;

						.tiutle {
							font-family: PingFangSC-Semibold;
							font-size: 28rpx;
							color: #FF0000;
							text-align: right;
							line-height: 30rpx;
							font-weight: 600;
						}

						.desss {
							color: #6ED26E;
						}

						.timise {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #666666;
							text-align: right;
							line-height: 30rpx;
							font-weight: 400;
							margin-top: 16rpx;
						}
					}
				}
			}
		}
	}
</style>